<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>START NW.JS</title>
        <link type="text/css" rel="stylesheet" href="../styles/style.css" />
    </head>
    <body >
        <h3>
            NW.JS
        </h3>
        <script>

            // 创建菜单bar
            var gui = require('nw.gui');
            var menubar = new gui.Menu({ type: 'menubar' });

            // 创建第一级菜单
            var sub1 = new gui.Menu();
            var sub2 = new gui.Menu();
            var sub3 = new gui.Menu();
            var sub4 = new gui.Menu();
            var sub5 = new gui.Menu();
            var sub6 = new gui.Menu();
            var sub7 = new gui.Menu();

            // 监听点击
            // sub2.on('click', () => {
            //     console.log('点击了第二个顶部菜单');
            // });

            // 创建菜单项
            menubar.append(new gui.MenuItem({ label: '菜单 A', submenu: sub1 }));
            menubar.append(new gui.MenuItem({ label: '菜单 B', submenu: sub2 }));
            menubar.append(new gui.MenuItem({ label: '菜单 C', submenu: sub3 }));
            menubar.append(new gui.MenuItem({ label: '菜单 D', submenu: sub4 }));
            menubar.append(new gui.MenuItem({ label: '菜单 E', submenu: sub5 }));

            function clickItemAppendContent(c){
                var element = document.createElement('div');
                element.appendChild(document.createTextNode('Test' + c));
                document.body.appendChild(element);
            }

            

            // 菜单 1 添加子菜单
            sub1.append(new gui.MenuItem({
                label: '子菜单 A-1',
                tooltip:'子菜单 A-1',
                click: function() { clickItemAppendContent('A-1') }
            }));
            sub1.append(new gui.MenuItem({
                label: '子菜单 A-2',
                click: function() { clickItemAppendContent('A-2') }
            }));
           
            // 多级别菜单
            sub1.append(new gui.MenuItem({
                label: '子菜单 A-3',
                click: function() { clickItemAppendContent('A-3') },
                submenu: sub6
            }));
            // 第二级菜单
            sub6.append(new gui.MenuItem({
                label: '子菜单 A-3-1',
                click: function() { clickItemAppendContent('A-3-1') }
            }));
            sub6.append(new gui.MenuItem({
                label: '子菜单 A-3-2',
                click: function() { clickItemAppendContent('A-3-2') }
            }));
            sub6.append(new gui.MenuItem({
                label: '子菜单 A-3-3',
                click: function() { clickItemAppendContent('A-3-3') },
                submenu: sub7
            }));

            
            //第三级菜单
            sub7.append(new gui.MenuItem({
                label: '子菜单 A-3-3-1',
                click: function() { clickItemAppendContent('A-3-3-1') }
            }));
            sub7.append(new gui.MenuItem({
                label: '子菜单 A-3-3-2',
                click: function() { clickItemAppendContent('A-3-3-2') }
            }));
            sub7.append(new gui.MenuItem({
                label: '子菜单 A-3-3-3',
                click: function() { clickItemAppendContent('A-3-3-3') }
            }));
            sub7.append(new gui.MenuItem({
                label: '子菜单 A-3-3-4',
                click: function() { clickItemAppendContent('A-3-3-4') }
            }));
            sub7.append(new gui.MenuItem({
                label: '子菜单 A-3-3-5',
                click: function() { clickItemAppendContent('A-3-3-5') }
            }));



            // 打印并且移除第一个子菜单
            console.log(sub1.items);
            // sub1.removeAt(0);

            // 获取窗口对象，然后通过下面 code 设置窗口的菜单。
            var win = gui.Window.get();
            win.menu = menubar;

        </script>
    </body>
</html>